終於來到最後一天啦！前面幾天也有嘗試再次把html放到AWS,但依舊還是沒辦法過API Gateway這關，明明CORS也設定好了，但fetch不到！！真的很苦惱（果然還是太菜了），之後我再多學一點，把它學深，會再試著把網站架上去，那接下來就來介紹最後的成果吧！

首頁（index.html)

• 上傳照片並預覽照片
• 輸入日記文字
  

選擇心情（開心、平靜、生氣、傷心）：對應卡片顏色

• 開心：綠色
• 平靜：黃色
• 生氣：紅色
• 傷心：藍色
  

按下「儲存日記」：

系統會顯示新增狀態，也可以觀察到下方「儲存日記」的按鈕會變成「儲存中...」

如果沒有輸入任何東西的話，系統也會提醒你：

回憶頁面（history.html)

整個回憶頁面的展示

再來我們確認剛剛建立的內容是不是真的存在裡面了，最新的內容會顯示在最前面，我們剛剛在設置顏色上是設為「生氣」對應到的顏色會是紅色，會想這樣做是因為你可以觀察到你每次發文的心情，用顏色就很明瞭的可以知道你大部分的情緒起伏，這邊我把每日限制發一篇的程式碼先拿掉了，因為我沒辦法忍住每天只發一篇哈哈哈
（不過目前資料是存在local storage，容量小，圖片又佔得很重，所以發不了太多文）

放大觀看卡片

編輯日記內容

再來我們來更改文章內容，我們以第二篇來做更改

以下是日記原本的內容

那我們更改全部內容（包含圖片），這邊編輯的話不會顯示原本的圖片呦！只有在更改圖片時會顯示更改後的圖片，所以我們就換另一張蛙蛙的照片

按下儲存後 原本的貼文就改啦～

刪除日記內容

那我們把剛剛更改後的內容刪掉，點擊刪除，視窗會自動跳出提醒，再次確認是否刪除，以免使用者不小心點錯

刪除後的畫面：

後記...

這幾天在完成網站內容的同時我也有再試著連到AWS，雖然最後還是出現一樣的錯誤，但我還是想講一下我的架構
這邊我建立了五個Lambda：

1. get_presigned_url：讓前端取得 S3 上傳圖片的「授權網址（presigned URL）」
2. save_diary：接收日記文字＋圖片連結，儲存至 DynamoDB
3. list_diaries：從 DynamoDB 讀取使用者全部日記資料
4. update_dairy：更新指定日記（文字、顏色、圖片）
5. delete_diary：刪除指定日記

兩個S3：

1. photo_diary_frontend：

• 儲存前端靜態網頁（index.html、history.html、style.css、main.js）
• 透過「靜態網站託管 (Static Website Hosting)」功能公開
• 前端網頁會呼叫 API Gateway

2. photo_diary_media：

• 儲存使用者上傳的照片
• 透過 get_presigned_url 取得臨時上傳權限
• 圖片 URL 會直接存入 DynamoDB（不存圖片本身）

一個DynamoDB：
PhotoDiary：儲存日記的結構化資料（文字、心情顏色、照片連結、建立時間等）

一個PhotoDiaryAPI：
PhotoDiaryAPI：對外公開的 API 接口，負責把前端請求導向各 Lambda

Lambda 與 Gateway API

首先先在五個 Lambda 中建立與 Gateway API 的觸發後，來到PhotoDiaryAPI會看到五條各自對應的路徑，對五條不同的路徑給不同方法，並將 Lambda 觸發後的 Gateway API 端點連結複製到前端頁面
1. /get_presigned_url：GET
2. /save_diary：POST
3. /list_diaries：GET
4. /update_dairy：PUT
5. /delete_diary：DELETE

完整運作流程（以發文為例）

1. 使用者在前端上傳照片 → 前端呼叫 get_presigned_url → 取得臨時上傳網址並上傳到 S3
2. 照片上傳成功後 → 前端呼叫 save_diary → 把文字、顏色、S3 圖片 URL 存到 DynamoDB
3. 在歷史頁面 history.html → 呼叫 list_diaries → 顯示所有日記卡片
4. 編輯時呼叫 update_diary；刪除時呼叫 delete_diary

但最後出的問題就在於前端沒辦法上傳，一直說我fetch到錯誤的連結，以及CORS沒有允許（明明都有寫好啦！），所以最後還是只能先以本地端做開啟再用localstorage做儲存，這個錯誤的部分我會再慢慢摸索看看，感覺最後如果真的成功debug應該會很有成就感喔！好啦，30天過很快，學到了很多東西，我覺得實作蠻重要的，當初我其實搞不懂AWS每個功能在幹嘛，但慢慢練習其實就慢慢記起!來了，能夠把這個小網站做出來也很有成就感，期待我之後的進步！